<template>
  <div class="login">
    <div class="login__top">
      <img src="../assets/images/login-logo.png" alt="">
      <div class="title title2">基层消防监督执法平台</div>
    </div>
    <div class="login__item">
      <van-form @submit="onSubmit">
        <div class="formLabel">账号</div>
        <div class="pwd">
          <van-field style="margin: 4px 0 24px 0" v-model="loginForm.userLogin" name="用户名" clearable placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写账号' }]" />
          <img v-show="false" src="../assets/images/closeEyes.png" alt="" @click="switchPasswordType" />
        </div>
        <div class="formLabel">密码</div>
        <div class="pwd">
          <van-field style="" v-model="loginForm.password" name="密码" :type="passType" placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
          <img class="my-eye-img" v-if="passType == 'password'" src="../assets/images/closeEyes.png" alt=""
            @click="switchPasswordType" />
          <img class="my-eye-img" v-if="passType == 'text'" src="../assets/images/openEyes.png" alt=""
            @click="switchPasswordType" />
        </div>
        <van-checkbox name="记住密码" shape="square" class="passCheck" v-model="checked">
          记住密码
        </van-checkbox>
        <div style="padding: 0 16px">
          <van-button block type="primary" native-type="submit" style="height: 47px; letter-spacing: 5px">
            登录
          </van-button>
        </div>
        <van-checkbox name="隐私协议" shape="square" class="ysCheck" v-model="checked2">
          已阅读并同意
          <span class="span" @click="goWeb(1)">《隐私政策》</span>
          和
          <span class="span" @click="goWeb(2)">《用户协议》</span>
        </van-checkbox>
      </van-form>
    </div>

    <div class="copyright">版权信息</div>
  </div>
</template>

<script setup name="Login">
import md5 from 'js-md5'
import { showSuccessToast, showNotify, showFailToast } from 'vant'
import { onMounted } from 'vue'

const { useLogin } = $globalStore
const router = useRouter()

const loginForm = ref({
  userLogin: '',
  password: '',
})

//记住密码
const checked = ref(localStorage.checked ? true : false)
const checked2 = ref(false)

const onSubmit = async (values) => {
  console.log('submit', values)
  if (!checked2.value) {
    return showNotify({ type: 'danger', message: '请勾选隐私政策和用户协议' })
  }
  rememberPwd(
    {
      userAccount: loginForm.value.userLogin,
      userPwd: loginForm.value.password,
    },
    checked.value
  )
  localStorage.setItem('checked', checked.value ? 'checked' : '')
  let params = {
    userLogin: loginForm.value.userLogin,
    password: md5(loginForm.value.password),
  }
  const res = await useLogin.login(params)
  if (res.code == 0) {
    console.log(res)
    sessionStorage.setItem('userInfo', JSON.stringify(res.data))
    sessionStorage.setItem('token', res.data.token)
    showSuccessToast({ message: '登录成功' })
    router.push({ name: 'home' })
  } else {
    showFailToast(res.message)
  }
}

//记住密码
const rememberPwd = (params, checked) => {
  localStorage.setItem('userAccount', params.userAccount)
  if (checked) {
    localStorage.setItem('userPwd', params.userPwd)
  } else {
    localStorage.removeItem('userPwd')
  }
}

const passType = ref('password')
const switchPasswordType = () => {
  if (passType.value == 'password') {
    passType.value = 'text'
  } else {
    passType.value = 'password'
  }
}

const goWeb = (val) => {
  if (val == 1) {
    // window.open('http://supervision.douziit.com/privacy_policy.html')
    window.open('http://172.24.162.26/privacy_policy.html')
  } else {
    // window.open('http://supervision.douziit.com/user_rule.html')
    window.open('http://172.24.162.26/user_rule.html')
  }
}

onMounted(() => {
  if (checked.value != '') {
    loginForm.value.userLogin = localStorage.userAccount
    loginForm.value.password = localStorage.userPwd
  }
})
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  position: relative;
  // display: flex;
  // align-items: center;
  // justify-content: center;

  &__top {
    width: 100%;
    height: 208px;
    background: url('../assets/images/loginbg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    img {
      width: 63px;
      height: 66px;
    }

    .title {
      font-size: 28px;
      font-weight: 500;
      letter-spacing: 1px;
      line-height: 40px;
      color: rgba(255, 255, 255, 1);
    }

    .title1 {
      padding-top: 50px;
      padding-left: 25px;
    }

    .title2 {
      margin-bottom: 30px;
    }
  }

  &__item {
    margin-top: -40px;
    padding: 40px 0 0 0;
    border-radius: 24px 24px 0px 0px;
    background-color: #ffffff;

    .formLabel {
      padding-left: 24px;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 24px;
      color: rgba(0, 0, 0, 1);
    }

    .pwd {
      display: flex;
      margin: 4px 16px 16px 0;
      align-items: center;

      >img {
        width: 20px;
        height: 20px;
      }
    }

    .passCheck {
      padding-left: 24px;
      margin-bottom: 22px;
    }

    .ysCheck {
      padding-left: 16px;
      margin-top: 12px;

      .span {
        color: #1764ce;
      }
    }

    &-title {
      font-size: 28px;
      text-align: center;
    }
  }
}

.copyright {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #a6a6a6;
}

.login .van-cell:after {
  left: 24px !important;
  right: 0 !important;
}

.login .van-cell:hover:after {
  border-bottom: 1px solid #1764ce !important;
}

.login .van-form .van-cell {
  padding: 12px 0 12px 16px !important;
}

.my-eye-img {
  position: absolute;
  right: 20px;
}
</style>
